.header_common {
  position: fixed;
  top: 0px;
  width: 100%;
  height: auto;
  z-index: 100;

  .bg_nav {
    width: 100%;
    height: auto;
    background: url(../images/home/bg_nav.jpg) no-repeat;
    background-size: 100% auto;

    nav {
      margin: 0px auto;
      width: 93%;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;

      ul {
        display: flex;
        width: auto;
        height: 5.5rem;
        align-items: center;

        li {

          a {
            text-decoration: none;
            font-size: 1.9375rem;
            color: #fee2ce;
          }
        }

        li:nth-child(2) {
          margin: auto 6.5625rem;

          a {
            color: #ffffff;
          }
        }

        li:hover {
          a {
            color: #ffffff;
          }
        }
      }
    }
  }

  .nav_menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;

    li {
      width: 7.625rem;
      height: 5.3125rem;
      text-align: center;

      a {
        text-decoration: none;
        font-size: 1.625rem;
        color: #323232;
        line-height: 5.3125rem;
      }
    }

    li:nth-child(1) {
      border-bottom: .3125rem solid #ff8833;

      a {
        color: #ff8833;
      }
    }

    li:hover {
      border-bottom: .3125rem solid #ff8833;

      a {
        color: #ff8833;
      }
    }
  }
}

.home_music {
  padding: 1.875rem 0px 0px;
  width: 100%;
  height: auto;
  background-color: #ffffff;

  ul {
    width: 93%;
    margin: .75rem auto 0px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    li {
      position: relative;
      width: 13.75rem;
      height: 18.875rem;
      margin-bottom: 1.8125rem;

      a {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;

        h3 {
          font-size: 1.25rem;
          color: #323232;
          line-height: 2.25rem;
          margin-top: .75rem;
          word-wrap: break-word;
        }

        h4 {
          position: absolute;
          font-size: 1.25rem;
          color: #a0a0a0;
          bottom: 0;
          left: 0;
          display: flex;
          align-items: center;

          img {
            margin-right: .875rem;
          }
        }

        span {
          position: absolute;
          top: .3125rem;
          left: .3125rem;
          display: block;
          width: 4.375rem;
          height: 1.875rem;
          background-color: rgba(0, 0, 0, 0.4);
          font-size: 1.25rem;
          color: #d4d2dc;
          text-align: center;
          line-height: 1.875rem;
        }
      }
    }
  }
}

.title {
  width: 93%;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  h2 {
    font-size: 1.8125rem;
    color: #323232;
  }

  a {
    font-size: 1.25rem;
    color: #a0a0a0;
    display: flex;
    text-align: center;
    align-items: center;
    text-decoration: none;

    img {
      margin-left: .625rem;
    }
  }
}

footer {
  position: fixed;
  bottom: 0px;

  margin-top: .0625rem;
  width: 100%;
  height: auto;
  background-color: #ffffff;

  .container {
    width: 93%;
    height: auto;
    margin: .625rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      a {
        text-decoration: none;
        font-size: 1rem;
        line-height: 2.25rem;
        display: flex;

        span {
          margin-left: 1.25rem;

          h2 {
            color: #323232;
          }

          h3 {
            color: #a0a0a0;
          }
        }
      }
    }

    .right {
      a:last-child {
        img {
          margin: auto 1.25rem auto 4.0625rem;
        }
      }
    }

  }

  .bar {
    position: absolute;
    top: -0.25rem;
    left: 0px;
    display: flex;
    align-items: center;
    z-index: 100;

    span:first-child {
      display: block;
      width: 17.5rem;
      height: .125rem;
      background-image: linear-gradient(#fc64d6, #ff8833);
    }

    span:last-child {
      display: block;
      width: .625rem;
      height: .625rem;
      border-radius: 50%;
      background-color: #ff8833;
    }
  }
}

.music_list {
  width: 100%;
  height: auto;

  li {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    padding: 1.25rem 0px;
    margin-top: .0625rem;

    .list {
      width: 93%;
      height: auto;
      display: flex;
      margin: 0 auto;
      justify-content: space-between;

      .left {
        a {
          text-decoration: none;
          font-size: 1.25rem;
          display: flex;
          align-items: center;

          span {
            margin-left: 1.0625rem;

            h2 {
              color: #323232;
              margin-bottom: .625rem;
            }

            h3 {
              color: #a0a0a0;
              line-height: 1.6875rem;
              display: flex;
              align-items: center;

              p:first-child {
                width: 1.75rem;
                height: 1.1875rem;
                border: .125rem solid #ff9041;
                font-size: .875rem;
                color: #ff9041;
                line-height: 1.1875rem;
                text-align: center;
                margin-right: 1.0625rem;
              }
            }
          }
        }
      }

      .right {
        display: flex;
        align-items: center;

        p {
          width: 2.6875rem;
          height: 2.0625rem;
          border: .125rem solid #ff8833;
          font-size: 1rem;
          color: #ff8833;
          text-align: center;
          line-height: 2.0625rem;
          margin-right: 3.125rem;
        }

        a {
          text-decoration: none;
          display: flex;

          span {
            display: block;
            width: .3125rem;
            height: .3125rem;
            background-color: #a0a0a0;
            border-radius: 50%;
          }

          span:nth-child(2) {
            margin: auto .3125rem;
          }
        }
      }
    }
  }
}